<template>
  <nav
    class="fixed left-0 top-0 z-50 w-full transition-all duration-300 ease-in-out"
    :class="[isTransparent ? 'bg-transparent' : 'bg-base-100 shadow-md']"
  >
    <div class="w-full px-4 lg:px-6">
      <div class="mx-auto w-full max-w-7xl">
        <div
          class="relative flex h-16 items-center justify-between sm:justify-start"
        >
          <div class="flex items-center gap-4">
            <div class="icon-[uil--blogger] h-10 w-10 text-primary"></div>
            <div class="nav-menu hidden items-center gap-2 md:flex">
              <RouterLink to="/">首页</RouterLink>
              <RouterLink to="/blog">文章</RouterLink>
              <RouterLink to="/tags">标签</RouterLink>
              <RouterLink to="/authors">作者</RouterLink>
              <RouterLink to="/about">关于</RouterLink>
              <RouterLink to="/my">我的</RouterLink>
            </div>
            <!-- 小屏状态下的菜单按钮 -->
            <div class="flex items-center lg:hidden">
              <button
                class="icon-[uil--bars] block h-8 w-8 md:hidden"
                @click="sideMenuShow = !sideMenuShow"
              ></button>
              <ZDrawer v-model="sideMenuShow">
                <div
                  class="flex h-full w-64 flex-col gap-2 bg-base-100 p-8"
                  @click="closeSideMenu"
                >
                  <RouterLink
                    class="rounded-md bg-base-200 py-4 pl-4 hover:bg-primary hover:text-primary-content"
                    to="/"
                    >首页</RouterLink
                  >
                  <RouterLink
                    class="rounded-md bg-base-200 py-4 pl-4 hover:bg-primary hover:text-primary-content"
                    to="/blog"
                    >文章</RouterLink
                  >
                  <RouterLink
                    class="rounded-md bg-base-200 py-4 pl-4 hover:bg-primary hover:text-primary-content"
                    to="/tags"
                    >标签</RouterLink
                  >
                  <RouterLink
                    class="rounded-md bg-base-200 py-4 pl-4 hover:bg-primary hover:text-primary-content"
                    to="/authors"
                    >作者</RouterLink
                  >
                  <RouterLink
                    class="rounded-md bg-base-200 py-4 pl-4 hover:bg-primary hover:text-primary-content"
                    to="/about"
                    >关于</RouterLink
                  >
                  <RouterLink
                    class="rounded-md bg-base-200 py-4 pl-4 hover:bg-primary hover:text-primary-content"
                    to="/my"
                    >我的</RouterLink
                  >
                </div>
              </ZDrawer>
            </div>
          </div>
          <div class="flex flex-1 items-center justify-end gap-4">
            <SearchButton
              path-name="blog-detail"
              query-url="/posts?orderby=-hits&title"
            />
            <SwitchTheme />
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>
<script setup lang="ts">
import { useWindowScroll } from "@vueuse/core";

const { y } = useWindowScroll();
const isTransparent = computed(() => y.value <= 42);

// 控制侧边栏菜单是否显示
const sideMenuShow = ref(false);

// 关闭侧边栏
const closeSideMenu = (event: Event) => {
  // 如果点击的是 a 链接
  if ((event.target as HTMLElement).tagName === "A") {
    sideMenuShow.value = false;
  }
};
</script>
<style>
.nav-menu a {
  @apply px-4 py-2;
}
.nav-menu a:hover {
  @apply rounded-md bg-base-200 text-neutral;
}
nav .router-link-exact-active {
  @apply rounded-md bg-primary text-primary;
  --tw-bg-opacity: 0.2;
}
</style>
